

<template>
  <!-- 导航部分 -->
  <el-row class="row">
    <el-col :span="24">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item>内容类型管理</el-breadcrumb-item>
        <el-breadcrumb-item>新增内容类型</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
  </el-row>
  <!-- 表单部分 -->
  <el-row class="row">
    <el-col :span="24">
      <el-form :model="category" label-width="auto" >
        <el-form-item label="父类型">
          <el-button @click="showChooseParentWin">{{parentName}}</el-button>
        </el-form-item>
        <el-form-item label="类型名称">
          <el-input v-model="category.catName" />
        </el-form-item>
        <el-form-item label="类型标记">
          <el-input v-model="category.catMark" />
        </el-form-item>
        <el-form-item label="类型说明">
          <el-input type="textarea" v-model="category.catDesc" />
        </el-form-item>
        <el-button type="info" @click="doSubmit">提交</el-button>
      </el-form>
    </el-col>
  </el-row>
  <!-- 选择父类别的弹窗 -->
  <el-dialog
      v-model="chooseParentDialog"
      title="选择父类别"
      width="500"

  >
    <el-tree
        :data="cats"
        :props="defaultProps"
        @node-click="chooseParent"
    />
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="chooseParentDialog = false">取消</el-button>
        <el-button type="primary" @click="doChooseParentCatOk">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
  import contentCategoryRequest from '../../api/contentCategory.js';
  import {ref,onMounted} from 'vue';
  import { ElMessage } from 'element-plus'
  import { useRouter } from 'vue-router'
  let category  = ref({catId:0});
  let chooseParentDialog = ref(false);
  let currentCat = undefined;// 记录当前选择的父类目对象
  let parentName = ref('无父类型');

  const router = useRouter()

  const defaultProps = {
    children: 'children',
    label: 'catName',
  }

  /*模拟数据*/
  let cats = [];

  /**
   * 显示选择父类型的窗体
   */
  function showChooseParentWin(){
    chooseParentDialog.value = true;
  }

  /**
   * 加载所有的内容类型，结果是一个树结构
   * @returns {Promise<void>}
   */
  async function loadCats(){
    contentCategoryRequest.queryAll(res=>{
      console.log(res)
      cats = res.data;
    })
  }

  /**
   * 树节点的单击事件
   * @param data 这个节点上的数据
   */
  function chooseParent(data){
      // 立刻记录当前选择的节点
      currentCat = data;
      console.log(currentCat)
  }

  /**
   * 选择父类目弹窗的确定按钮
   */
  function doChooseParentCatOk(){
    // 将按钮文本修改为 当前选择的父类别名称
    if(currentCat)
      parentName.value = currentCat.catName;
    // 关闭窗体
    chooseParentDialog.value = false;
  }

  /**
   * 添加内容类别提交按钮事件
   */
  async function doSubmit(){
    if(currentCat == undefined){
      category.value.parentId = 0;
    }else{
      category.value.parentId=currentCat.catId;
    }
    console.log(category.value)
    await contentCategoryRequest.save(category.value,res=>{
      if(res.code == 200){
        ElMessage({
          type:"success",
          message:"添加内容类型成功"
        });
        router.push("/home/contentCategory-list");
      }else if(res.code == 300){
        ElMessage({
          type:"warning",
          message:"内容类型的名称重复"
        });
      }else{
        ElMessage({
          type:"error",
          message:"添加失败"
        });
      }
    })
  }
  onMounted(()=>{
    loadCats();
  });
</script>
<style scoped>
.row{
  margin-top: 15px;
  padding: 10px;
}
</style>